<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}My Website{% endblock %}</title>
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
    <link href="{{ url_for('static', filename='css/tailwind.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/all.min.css') }}" rel="stylesheet">
    
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"> -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/echarts-wordcloud/dist/echarts-wordcloud.min.js"></script> -->

    <script src="{{ url_for('static', filename='js/echarts.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/echarts-wordcloud.min.js') }}"></script>

    <link href="{{ url_for('static', filename='js/echarts.min.js') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='js/echarts-wordcloud.min.js') }}" rel="stylesheet">

    <style>
        .markdown-body table {
            width: 100%;
            border-collapse: collapse;
        }
        .markdown-body table th,  table td {
            border: 1px solid #000;
            padding: 8px;
            text-align: left;
        }
        .markdown-body table th {
            background-color: #f2f2f2;
        }





    </style>
</head>
<body class="bg-white dark:bg-black text-black dark:text-white font-sans">







    <header class="bg-white dark:bg-black text-black dark:text-white p-4">
        <div class="container mx-auto">
            <!-- Logo Start -->
            <!-- <div class="text-center mb-4"> -->
                <!-- <img src="{{ url_for('static', filename='images/logo.svg') }}" alt="Logo" class="w-32 h-auto mx-auto"> -->
            <!-- </div> -->
            <!-- Logo End -->
            <!-- Title Start -->
            <h1 class="text-4xl font-bold text-center">Welcome {{ user_name }} to the Website</h1>
            <!-- Title End -->
        </div>
    </header>


    <nav class="bg-white dark:bg-black text-black dark:text-white shadow dark:shadow-red-950 hidden sm:flex sm:justify-between sm:items-center">
        <div class="container mx-auto px-4 py-6 flex justify-center">
            <ul class="flex space-x-8">
                <li><a href="/" class="text-red-500 hover:text-red-700">首页</a></li>
                <li><a href="/about" class="text-red-500 hover:text-red-700">关于</a></li>
                <li><a href="/portfolio" class="text-red-500 hover:text-red-700">作品</a></li>
                <li><a href="/archives" class="text-red-500 hover:text-red-700">归档</a></li>
                <li><a href="/tags" class="text-red-500 hover:text-red-700">标签</a></li>
            </ul>
        </div>
    </nav>

    <form action="/search" method="post" class="flex items-center">
        <input type="text" name="search" class="w-full p-2 border border-gray-300 rounded-l" placeholder="Search...">
        <button type="submit" value="Search" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-r">Search</button>
    </form>

    <!-- <div class="navbar"> -->
        <!-- {% if current_user.is_authenticated %} -->
            <!-- <a href="{{ url_for('main.logout') }}">Logout</a> -->
        <!-- {% else %} -->
            <!-- <a href="{{ url_for('main.login') }}">Login</a> -->
            <!-- <a href="{{ url_for('main.register') }}">Register</a> -->
        <!-- {% endif %} -->
    <!-- </div> -->
    
        {% block content %}{% endblock %}

    <footer class="bg-white dark:bg-black text-black dark:text-white p-4">
        <div class="container mx-auto text-center">
            <p>&copy; 2024 My Website. All rights reserved.</p>
        </div>
    </footer>
<!-- 底部导航栏 -->
<nav id="bottom-nav" class="fixed inset-x-0 bottom-0 flex justify-between items-center bg-white dark:bg-black h-16 shadow-lg px-6 md:hidden transition-transform duration-300">
    <a href="/" class="flex flex-col items-center text-gray-700 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400 transition duration-300">
        <svg class="h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
            <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
        </svg>
        <span class="text-xs">首页</span>
    </a>
    <a href="/about" class="flex flex-col items-center text-gray-700 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400 transition duration-300">
        <svg class="h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
            <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
        <span class="text-xs">关于</span>
    </a>
    <a href="/portfolio" class="flex flex-col items-center text-gray-700 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400 transition duration-300">
        <svg class="h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
            <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
        </svg>
        <span class="text-xs">作品</span>
    </a>
    <a href="/archives" class="flex flex-col items-center text-gray-700 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400 transition duration-300">
        <svg class="h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
            <path d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"></path>
        </svg>
        <span class="text-xs">归档</span>
    </a>
    <a href="/tags" class="text-center text-gray-700 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400 transition duration-300">
        <svg class="h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
            <path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
        </svg>
        <span class="block text-xs">我的</span>
    </a>
</nav>


<script>
  let lastScrollTop = 0;
  const navbar = document.getElementById('bottom-nav');

  window.addEventListener('scroll', () => {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    if (scrollTop > lastScrollTop) {
      // 用户向上滚动
      navbar.classList.remove('translate-y-0');
      navbar.classList.add('translate-y-full');
    } else {
      // 用户向下滚动
      navbar.classList.remove('translate-y-full');
      navbar.classList.add('translate-y-0');
    }
    lastScrollTop = scrollTop; // 为下一次滚动保存位置
  }, false);
</script>




</body>
</html>
